<!--
 * @Author: your name
 * @Date: 2022-03-02 14:40:58
 * @LastEditTime: 2022-03-02 19:24:28
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \3.1日作业\css\商品详情.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3206123_lu3tfric82l.css">
    <link rel="icon" href="ffavicon.ico">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/公共样式.css">
    <link rel="stylesheet" href="./css/商品详情.css">
    <script src="../js/vue.js"></script>
</head>

<body>
    <header>
        <div class="head">
            <span class="time"> 9.42</span>
            <span class="iconfont icon icon-IOTtubiao_huabanfuben"></span>
        </div>
        <nav><a href="#" class="shopping">购物车</a>
            <div class="fenlei">
                <span class="fen"><a href="#">全部(20)</a></span>
                <span class="fen"><a href="#">降价(4)</a></span>
                <span class="fen"><a href="#">热卖(2)</a></span>
                <span class="fen"><a href="#">分类</a></span>
            </div>
        </nav>
    </header>
    <div class="banxin">

        <article>
            <div id="app">
                <aside class="quyu">
                    <input type="checkbox" class="ipts" id="ipt1" v-model="allChecked" @change="changeAllChecked">
                    <label for="ipt1" class="ipts-radias"></label>
                    <span class="ziying">小U自营</span>
                    <div class="lingquan">
                        <span>已免运费</span>
                        <a href="#" class="red">领券</a>
                    </div>
                </aside>
                <div v-for="(item,index) in arr" :key="item.id" class="content">
                    <input type="checkbox" class="ipts" :id="item.ids" v-model="item.checked" @change="changeOne">
                    <label :for="item.ids" class="ipts-radias"></label>
                    <div class="bannertu"></div>
                    <div class="right">
                        <div class="right-hd">
                            <p class="wenzi1">溪牧原山茶花洁面泡沫 氨基...</p>
                            <a href="#" class="wenzi2">{{item.xinghao}}</a>
                        </div>
                        <div class="right-bd">
                            <a href="#" class="red-to">￥{{item.danjia}}</a>
                            <a href="#" class="jiangjia">{{item.jiage}}</a>
                            <div class="bottom-tianjia">
                                <button @click="sub(index)">-</button>
                                <a href="#" class="tianjia"> {{item.num}}</a>
                                <button @click="add(index)">+</button>

                            </div>
                        </div>
                    </div>
                </div>
                <div id="sss">
                    <ul>
                        <li class="ww"> <input type="checkbox" class="ipts" id="ibs">
                            <label for="ibs" class="ipts-radias"></label></li>
                        <li class="quanxuan">全选</li>
                        <li class="widths">
                            <div class="heji">合计</div>
                            <div>免运费</div>
                        </li>
                        <li class="wtd">
                            <div class="ee">￥{{allPrice|filterPrice}}</div>
                            <div class="youhui">已优惠200.00元</div>
                        </li>
                        <li class="price">
                            <a href="javascript:;" style="color:white;">结算</a>
                        </li>
                    </ul>
                </div>
            </div>

        </article>
        <aside class="quyu">
            <input type="checkbox" class="ipts" id="ipt6">
            <label for="ipt6" class="ipts-radias"></label>

            <span class="ziying">小U自营</span>
            <div class="lingquan">
                <span>已免运费</span>
                <a href="#" class="red">领券</a>
            </div>
        </aside>

    </div>

    <footer>
        <a href="#"><img src="./image/商城.png" alt=""> <span class="wenz">商城</span></a>
        <a href="#"><img src="./image/分类.png" alt=""> <span class="wenz">分类</span></a>
        <a href="#"><img src="./image/购物车.png" alt=""> <span class="wenz">购物车</span></a>
        <a href="#"><img src="./image/我的.png" alt=""> <span class="wenz">我的</span></a>
    </footer>
</body>
<script>
    let mock = [{
            id: 1,
            title: "溪牧原山茶花洁面泡沫 氨基...",
            xinghao: "桔色果汁[20#]",
            jiage: "距离加入降￥5.00",
            ids: "ipt3",
            danjia: 8.88,
            num: 1
        }, {
            id: 2,
            title: "溪牧原山茶花洁面泡沫 氨基...",
            xinghao: "桔色果汁[20#]",
            jiage: "距离加入降￥5.00",
            ids: "ipt4",
            danjia: 101.11,
            num: 2
        }, {
            id: 3,
            title: "溪牧原山茶花洁面泡沫 氨基...",
            xinghao: "桔色果汁[20#]",
            jiage: "距离加入降￥5.00",
            ids: "ipt5",
            danjia: 202.11,
            num: 3
        }, {
            id: 4,
            title: "溪牧原山茶花洁面泡沫 氨基...",
            xinghao: "桔色果汁[20#]",
            jiage: "距离加入降￥5.00",
            ids: "ipt6",
            danjia: 301.11,
            num: 4
        }, {
            id: 5,
            title: "溪牧原山茶花洁面泡沫 氨基...",
            xinghao: "桔色果汁[20#]",
            jiage: "距离加入降￥5.00",
            ids: "ipt7",
            danjia: 999.11,
            num: 5
        }, {
            id: 6,
            title: "溪牧原山茶花洁面泡沫 氨基...",
            xinghao: "桔色果汁[20#]",
            jiage: "距离加入降￥5.00",
            ids: "ipt8",
            danjia: 1011.11,
            num: 1
        }, {
            id: 7,
            title: "溪牧原山茶花洁面泡沫 氨基...",
            xinghao: "桔色果汁[20#]",
            jiage: "距离加入降￥5.00",
            ids: "ipt9",
            danjia: 111.11,
            num: 2
        }]
        // 6.过滤器
    Vue.filter("filterPrice", p => p.toFixed(2))
    let vm = new Vue({
        el: "#app",
        data: {
            // 1.初始化数据
            arr: [],
            allChecked: false, //全选
        },
        mounted() {
            // 2.进来就请求数据

            // 先补checked ，后赋值
            mock.forEach(item => item.checked = false)
            this.arr = mock;
        },
        methods: {
            // 3.删除
            del(index) {
                this.arr.splice(index, 1)
            },
            // 4.数量+
            add(index) {
                this.arr[index].num++;
                this.arr[index].num = Math.min(10, this.arr[index].num)

            },
            //5.数量-
            sub(index) {
                this.arr[index].num--;

                this.arr[index].num = Math.max(1, this.arr[index].num)

            },
            //7.点了全选
            changeAllChecked() {
                this.arr.forEach(item => item.checked = this.allChecked)
            },
            // 8.某一条数据选中状态发生了改变
            changeOne() {
                // 每一条数据的checked是true,全选true;有1条假，整体就是假
                this.allChecked = this.arr.every(item => item.checked)
            }

        },
        computed: {
            //9.总价
            allPrice() {

                console.log(this.arr.reduce((val, item) => item.checked ? val + (item.danjia * item.num) : val, 0));
                return this.arr.reduce((val, item) => item.checked ? val + (item.danjia * item.num) : val, 0)
            }
        }
    })
</script>

</html>